<template>
	<div id="app">
		<el-container style="height: calc(100vh - 20px);">
			<el-aside :width="asidewidth" style="overflow-y: auto;transition: all .3s linear;">
				<div class="menubox">
					<menubox ref="menu" :iscollapse="isCollapse" :isshow="show"></menubox>
				</div>
			</el-aside>
			<el-container>
				<el-header style="padding: 0;">
					<div class="head">
						<el-button type="info" icon="el-icon-s-fold" @click="trigger" circle :label="label">
						</el-button>
						<el-button @click="login" class="login" size="mini" type="info">登录</el-button>
					</div>
				</el-header>
				<el-main style="padding: 0;">
					<div class="context">
						<router-view class="content"></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import menubox from './components/page/menu.vue'
	export default {
		data() {
			return {
				label: false,
				isCollapse: false,
				show: true,
				asidewidth: '200px',
			}
		},
		methods: {
			trigger() {
				this.isCollapse = !this.isCollapse
				this.show = !this.show
				if (this.$refs.menu.$el.clientWidth < 100) {
					this.asidewidth = `200px`
				} else {
					this.asidewidth = `75px`
				}

			},
			login() {
				console.log(`${this.$refs.menu.$el.clientWidth}px`);
			}
		},
		components: {
			menubox
		},
		mounted() {

		}
	}
</script>

<style>
	#app {
		font-family: Helvetica, sans-serif;
	}

	.menubox {
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.menu{
		height: calc(100vh);
		overflow-y: auto;
	}

	.context {
		margin-top: 20px;
	}

	.head {
		border-bottom: 1px solid #F0F0F0;
		box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
		padding: 10px;
		margin-left: 10px;
		height: 45px;
		line-height: 45px;
		position: relative;
	}

	.head .login {
		position: absolute;
		right: 20px;
		top: 20px;
	}
</style>
